import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { updateProductAction } from '../../store/actionCreator'
import './NewItemList.scss'
class NewItemList extends Component {
  state = {
    newItemList: []
  }
  componentDidMount() {
    const list=this.props.data.data.newItemList;
    this.setState({
      newItemList:[list.slice(0, 3), list.slice(3, 6)]
    })
  }
  render() {
    return (
      <div className='newItemListCon'>
        <div className="newItemListTit">
          <div className="newItemListTitLt">新品首发</div>
          <div className="newItemListTitMore">更多 </div>
        </div>
        {
          this.state.newItemList && this.state.newItemList.map((item, i) => (
            <div className='NewItemList' key={i}>
              {
                item.map(v => (
                  <div className="NewItemListItem" key={v.displaySkuId} onClick={() => {
                    this.props.history.push("/ProductDetail/?id=" + v.id)
                  }}>
                    <img src={v.primaryPicUrl} alt="" />
                    <div className="newItemTitle">{v.name}</div>
                    <div className="newItemPrice">¥{v.retailPrice}</div>
                    <div className="newItemTag">
                      {
                        v.itemTagList && v.itemTagList.map(val => (
                          <span key={val.tagId + '-' + v.itemId}>{val.name}</span>
                        ))
                      }
                    </div>
                  </div>
                ))
              }
            </div>
          ))
        }

      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    productReducer: state.getIn(['productReducer'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    updateProduct: (detail) => {
      dispatch(updateProductAction(detail))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(NewItemList))